<template>
    <div class="icons">
        <swiper :options="swiperOption">
            <swiper-slide v-for='(page, index) of pages' :key='index'>
                <div class="icon" v-for='item of page' :key='item.id'>
                    <div class="icon-img">
                        <img class="icon-img-content" :src='item.imgUrl' />
                    </div>
                    <p class="icon-desc">{{item.desc}}</p>
                </div>
            </swiper-slide>
         </swiper>
        
    </div>
</template>

<script>
export default{
    name: 'HomeIcons',
    props: {
        list: Array
    },
    data(){
        return {
            swiperOption: {
                autoplay: false
            }
        }
    },
    // 计算属性
    computed: {
        // pages
        pages(){
            // 定一个pages数组
            const pages =[];
            // 对iconList进行一个循环 循环项 目标 
            this.list.forEach((item, index) => {
                const page = Math.floor(index/8);
                if(!pages[page]){
                    pages[page] = []
                }
                pages[page].push(item);
            });
            return pages;   
        }
    }
}
</script>
// 这段代码要重点学习一下
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    @import '~styles/mixins.styl'
        .icons>>>.swiper-container
            overflow: hidden;
            height: 0;
            padding-bottom: 50%;
        .icons
            margin-top: .1rem
            .icon
                overflow: hidden;
                position: relative;
                float: left;
                width: 25%;
                height: 0;
                padding-bottom: 25%
                .icon-img
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0px;
                    bottom: .44rem;
                    box-sizing: border-box;
                    padding: .1rem
                    .icon-img-content
                        display: block;
                        margin: 0 auto;
                        height: 100%;
                .icon-desc
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    color: $darkTextColor;
                    height: .44rem;
                    line-height: .44rem;
                    text-align: center;
                    font-size: .2rem;
                    ellipsis()
                
</style>
